<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>主页</title>
    <link th:href="@{/Bootstrap/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/animate.min.css}" rel="stylesheet">

    <style>
        #startBtn {
            width: 130px;
            height: 130px;
            border: 1px solid #ccc;
            border-radius: 50%;
        }

        #startBtn:hover {
            cursor: pointer;
        }
    </style>

</head>
<body>
<div style="position: absolute;left: 0;right: 0;top: 0;bottom: 0">
    <div style="display: flex;justify-content: center;margin-top: 10%">
        <div style="align-items: center">
            <div class="animated slideInUp" style="padding: 20px">
                <span style="font-size: 50px">你好！<text th:text="${student.realName}"></text>同学</span>
            </div>
            <div class="animated slideInUp " style="text-align: center;padding: 20px">
                <a onclick=window.location='/student/questionPage'>
                    <button style="outline: none" type="button" id="startBtn" class="btn btn-primary">
                        <span style="text-align: center;font-size: 20px">开始答题</span>
                    </button>
                </a>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/Bootstrap/js/jquery-1.11.2.js}"></script>
<script th:src="@{/Bootstrap/js/bootstrap.js}"></script>
<script>

    $(function () {
        $('#startBtn').click(start);
    });

    function start() {
        $('#startBtn').addClass("animated bounceOut");
    }
</script>

</body>
</html>